import Image from 'next/image'
import Progress from '@/components/progress'
import { useRouter } from 'next/router';
import ProgressDown from '@/components/progress/down'
import { getAidrawGetNum } from '@/api'
import Header from '@/components/home/header'
import nan from '@/assets/images/nan.png'
import nv from '@/assets/images/nv.png'
import naning from '@/assets/images/naning.png'
import nving from '@/assets/images/nving.png'
import { useStores } from '@/store';
import { useEffect, useState } from 'react';
import { SpinLoading, Toast } from 'antd-mobile';
import { observer } from 'mobx-react-lite';
export default observer(function Create() {
  const router = useRouter()
  const store = useStores()
  const [num, setNum] = useState(0)

  const getNum = async () => {
    const res = await getAidrawGetNum({ pt: store.active.pt })
    if (res.code) {
      setNum(res.data.num)
    }
  }
  useEffect(() => {
    if (store.active.reqImage.is_synthesis == '') {
      router.push({ pathname: '/headshot', query: { ...router.query } })
    }
    getNum()
  }, [])
  return (
    <div className='w-full h-full min-h-r66.7'>
      <Header cb={() => { router.back() }} headerColor='bg-FFE5E5' headerText={'AI生成情侣头像'}></Header>
      {store.active.successStatus === 'none' ? null : <div className=' absolute top-1/3 left-1/2 transform  -translate-x-1/2  -translate-y-1/2 '><SpinLoading ></SpinLoading></div>}
      {store.active.successStatus === 'start' ? <ProgressDown></ProgressDown> : null}
      {store.active.successStatus === 'none' ? <Progress></Progress> : null}

      <div className='h-auto w-full pl-r0.7'>
        <div className='w-r16.5 h-r16.5 inline-block bg-white rounded-2xl m-r0.8 text-center '>
          <Image className=' w-full h-rull ' src={store.active.successStatus === 'none' ? nan : naning} alt={''}></Image>
        </div>
        <div className='w-r16.5 h-r16.5 inline-block bg-white rounded-2xl m-r0.8 text-center'>
          <Image className=' w-full h-rull ' src={store.active.successStatus === 'none' ? nv : nving} alt={''}></Image>
        </div>
      </div>
      <div className=' mt-r1.5 w-full inline-block'>
        {store.active.successStatus === 'none' ? <span
          onClick={() => {
            if (num < 2) {
              Toast.show('点数不足,分享获得点数再生成!')
              return;
            }
            store.active.setCreateAndPolling(() => {
              router.push({ pathname: '/finish', query: { ...router.query } })
              getNum()
            }, () => {
              Toast.show('生成失败')
              store.active.successStatus = 'none'
            })
          }}
          className=' block relative w-r34.5 h-r4.5 leading-r4.5 text-r1.6 rounded-3xl  text-white cursor-pointer  bg-gradient-to-r from-FF4747 to-FF7070   text-center left-1/2 -translate-x-1/2 mb-r1.5 '
        >开始生成</span> : <span
          onClick={() => {
            store.active.cannalPolling(() => { Toast.show('取消成功') }, () => { Toast.show('取消失败，正在生成中') })
          }}
          className=' block relative w-r34.5 h-r4.5 leading-r4.5 text-r1.6 rounded-3xl  text-white cursor-pointer  bg-gradient-to-r from-FF4747 to-FF7070   text-center left-1/2 -translate-x-1/2 mb-r1.5 '
        >取消生成</span>}

      </div>

      <div className=' text-center'>
        <span className=' font-bold text-r1.2 leading-r2.1'>当前剩余点数：{num}点 本次消耗：2点</span>
      </div>

    </div>
  )
})
